<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>{$page_title}</title>
  <meta name="description" content="">
  <style>
    :root {
      --nav-height: 20px;
      --bar-height: {$h}px;
    }
  </style>
  <link rel="stylesheet" href="/static/natal_chat/css/index.css?v=23">
  <style>
    .pop-content .pop-head {
      text-align: center;
      font-size: 1rem;
      font-weight: 500;
      color: #24252A;
    }

    .pop-left {
      width: 6.63rem;
      height: 20rem;
      overflow-x: hidden;
      overflow-y: scroll;
      float: left;
    }

    .type-list {
      width: 100%;
      overflow-x: hidden;
    }

    .pop-left::-webkit-scrollbar {
      display: none;
    }

    .type-list .type-item {
      width: 100%;
      height: 1.25rem;
      line-height: 1.25rem;
      display: block;
      text-align: center;
      padding: 1.13rem 0;
      font-size: 0.88rem;
      color: #8a8c98;
      font-weight: 400;
      background-color: #f7f7f7;
    }

    .type-list .type-item.cur {
      font-weight: 500;
      color: #24252a;
      background-color: #fff;
      position: relative;
    }

    .type-list .type-item.cur::before {
      content: '';
      width: 0.625rem;
      height: 0.625rem;
      position: absolute;
      top: -0.625rem;
      right: 0;
      background-image: url("/static/natal_chat/img/flag.png");
      background-size: cover;
      background-repeat: no-repeat;
    }

    .type-list .type-item.cur::after {
      content: '';
      width: 0.625rem;
      height: 0.625rem;
      position: absolute;
      bottom: -0.625rem;
      right: 0;
      background-image: url("/static/natal_chat/img/flag.png");
      background-size: cover;
      background-repeat: no-repeat;
      transform: rotateX(180deg);
    }

    .pop-right {
      width: calc(100% - 6.63rem);
      height: 20rem;
      float: left;
    }

    .pop-content .question-list {
      width: 100%;
      height: 100%;
    }

    .pop-content .question-list .list-item {
      width: 14.31rem;
      height: auto;
      padding: 0.5rem 0.63rem;
      margin-top: 0.63rem;
      line-height: 1.38rem;
      white-space: normal;
    }

    .body .chat-list .content .top{
      width: 5.88rem;
      height: 1.5rem;
      line-height: 1.5rem;
      background-image: url("/static/natal_chat/img/{$chat_top_img}")!important;
      background-repeat: no-repeat;
      background-size: contain;
      text-indent: 999rem;
      overflow: hidden;
    }
  </style>
  <script>
      const app_type = `{$app_type}`;
      const rid = parseInt(`{$data.rid}`);
      const share_url = `{$data.share_url}`;
      const avatar = `{$data.avatar}`;
      window.dt = parseInt(new Date().getTime() / 1000 / 86400) * 86400;
      window.total = null;
      window.qt = null;
      window.timeout = 10000;
      window.retryParams = null;
      var lst = localStorage.getItem('share-limit');
      if (lst) {
          window.today =  JSON.parse(lst);
          if (window.today.date < window.dt) {
              window.today = {
                  date: dt,
                  num: 0, // 剩余次数
                  times: 0, // 分享次数
              }
              localStorage.setItem('share-limit', JSON.stringify(window.today));
          }
      } else {
          window.today = {
              date: dt,
              num: 0, // 剩余次数
              times: 0, // 分享次数
          }
          localStorage.setItem('share-limit', JSON.stringify(window.today));
      }
      const questionTypeList = {:json_encode($data.question)};
  </script>
</head>
<body>
<div class="container">
  <div class="header">
    <div class="nav">
      <div class="back" onclick="commonJsToNative('local', 'back');"></div>
      <div class="title">准了星座解读</div>
    </div>
  </div>
  <div class="body">

  </div>
  <div class="pop-box">
    <div class="pop-shadow tap" data-event="closeWindow"></div>
    <div class="pop-content">
      <div class="pop-head">
        <div class="back icon-back tap" data-event="closeWindow"></div>
        问题
      </div>
      <div class="pop-left">
        <!--问题分类列表-->
        <div class="type-list">
          {foreach $data.question as $k1 => $v1}
          <div class="type-item tap {if $k1 === 0}cur{/if}" data-event="switchQuestionType" data-index="{$k1}">{$v1.title}</div>
          {/foreach}
        </div>
      </div>
      <div class="pop-right">
        <!--问题列表-->
        {foreach $data.question as $k1 => $v1}
        <div class="question-list {if $k1 === 0}cur{/if}">
          {foreach $v1.q_list as $k2 => $v2}
          <div class="list-item tap" data-event="getQuestionAnswer" data-qtype="{$v2.type}" data-qid="{$v2.id}" data-type="{$v1.title}">{$v2.title}</div>
          {/foreach}
        </div>
        {/foreach}
      </div>
    </div>
  </div>
  <!--分享 0：微信；1：微信朋友圈；2：微博；3：qq；4：qq空间-->
  <div class="dialog-content share-choice">
    <div class="mask tap" data-event="closeShare"></div>
    <div class="title">分享到：</div>
    <div class="share-list">
      <div class="list-item tap" data-event="share-invite" data-platform="0">
        <span class="weixin"></span>微信
      </div>
      <div class="list-item tap" data-event="share-invite" data-platform="1">
        <span class="weixin-timeline"></span>朋友圈
      </div>
      <div class="list-item tap" data-event="share-invite" data-platform="2">
        <span class="weibo"></span>新浪微博
      </div>
      <div class="list-item tap" data-event="share-invite" data-platform="3">
        <span class="qq"></span>QQ好友
      </div>
      <div class="list-item tap" data-event="share-invite" data-platform="4">
        <span class="qzone"></span>QQ空间
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="/static/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/static/natal_chat/js/index.js?v=27"></script>

</body>
</html>
